<template>
  <vxe-grid
    ref="xTable"
    border
    resizable
    keep-source
    height="300px"
    align="center"
    :edit-rules="validRules"
    :edit-config="{trigger: 'click', mode: 'row'}"
    :toolbar-config="{slots: { buttons: 'toolbar_buttons'}}"
    :columns="tableColumn"
    :data="dataSource"
    @checkbox-all="onSelectChange"
    @checkbox-change="onSelectChange"
  >
    <template v-slot:toolbar_buttons>
      <a-button type="primary" icon="plus" style="margin:0px 8px 0px 0px;" @click="handleAdd">新增</a-button>
      <a-dropdown v-if="selectionRows.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
        </a-menu>
        <a-button>批量操作<a-icon type="down" /></a-button>
      </a-dropdown>
    </template>
    <template v-slot:action="{ row }">
      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row)">
        <a>删除</a>
      </a-popconfirm>
    </template>
  </vxe-grid>
</template>
<script >
export default {
  name: 'AssessmentItemsTable',
  props: {
    dataSource: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      tableColumn: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60 },
        { field: 'indexName', title: '分类', editRender: { name: '$input' }},
        { field: 'indexDesc', title: '考核指标', editRender: { name: '$input' }},
        { field: 'weight', title: '权重', editRender: { name: '$input', props: { type: 'number' }}},
        { title: '操作', slots: { default: 'action' }}
      ],
      validRules: {
        indexName: [
          { required: true, message: '请填写分类' }
        ],
        indexDesc: [
          { required: true, message: '请填写考核指标' }
        ],
        weight: [
          { required: true, message: '请填写权重' },
          { validator: this.weight },
          { min: 0, type: 'number', message: '请填写大于0的数字' }
        ]
      },
      selectionRows: [],
      selectedRowKeys: []
    }
  },
  methods: {
    weight({ cellValue, row, rowIndex }) {
      const { fullData } = this.$refs.xTable.getTableData()
      let total = 0
      fullData.map((item, i) => {
        if (row._XID !== item._XID) {
          total += Number(item.weight)
        } else {
          total += Number(cellValue)
        }
      })
      if (total !== 100) {
        return new Error('所有权重之和必须等于100')
      }
    },
    validate() {
      return this.$refs.xTable.validate(true)
    },
    getTableData() {
      return this.$refs.xTable.getTableData()
    },
    handleAdd() {
      this.$refs.xTable.insertAt({}, -1)
    },
    handleDelete(row) {
      this.$refs.xTable.remove(row)
    },
    batchDel() {
      this.$refs.xTable.removeCheckboxRow()
    },
    cancelRowEvent(row) {
      const xTable = this.$refs.xTable
      xTable.clearActived().then(() => {
        xTable.revertData(row)
      })
    },
    onSelectChange({ records }) {
      this.selectedRowKeys = []
      records.forEach(item => {
        this.selectedRowKeys.push(item.id)
      })
      this.selectionRows = records
    }
  }
}
</script>
